
import MenuToggle from '../components/MenuToggle';
import { Badge } from '@/components/ui/badge';
import { CardContent, CardHeader, Card, CardTitle } from '@/components/ui/card';
import { SelectItem, Select, SelectContent, SelectValue, SelectTrigger } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Eye, Palette, Monitor, Share2, Tablet, FileText, Download, Smartphone } from 'lucide-react';
import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
const ThemePreview = ({ toggleSidebar }) => {
  const [selectedTheme, setSelectedTheme] = useState('default');
  const [previewDevice, setPreviewDevice] = useState('desktop');

  // 模拟主题数据
  const themes = [
    {
      id: 'default',
      name: '默认主题',
      colors: {
        primary: '#2563eb',
        secondary: '#64748b',
        background: '#ffffff',
        surface: '#f8fafc'
      }
    },
    {
      id: 'dark',
      name: '深色主题',
      colors: {
        primary: '#3b82f6',
        secondary: '#6b7280',
        background: '#1f2937',
        surface: '#374151'
      }
    },
    {
      id: 'green',
      name: '绿色自然',
      colors: {
        primary: '#10b981',
        secondary: '#6b7280',
        background: '#ffffff',
        surface: '#f0fdf4'
      }
    }
  ];

  const currentTheme = themes.find(t => t.id === selectedTheme) || themes[0];

  const getDeviceClass = () => {
    switch (previewDevice) {
      case 'mobile':
        return 'max-w-sm mx-auto';
      case 'tablet':
        return 'max-w-2xl mx-auto';
      default:
        return 'w-full';
    }
  };

  const getDeviceIcon = () => {
    switch (previewDevice) {
      case 'mobile':
        return <Smartphone className="w-4 h-4" />;
      case 'tablet':
        return <Tablet className="w-4 h-4" />;
      default:
        return <Monitor className="w-4 h-4" />;
    }
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-3">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center">
                  <FileText className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    主题预览
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    预览和测试不同主题效果
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <Select value={selectedTheme} onValueChange={setSelectedTheme}>
                <SelectTrigger className="w-48">
                  <Palette className="w-4 h-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {themes.map(theme => (
                    <SelectItem key={theme.id} value={theme.id}>
                      {theme.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Select value={previewDevice} onValueChange={setPreviewDevice}>
                <SelectTrigger className="w-32">
                  {getDeviceIcon()}
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="desktop">桌面</SelectItem>
                  <SelectItem value="tablet">平板</SelectItem>
                  <SelectItem value="mobile">手机</SelectItem>
                </SelectContent>
              </Select>

              <Button variant="outline">
                <Share2 className="w-4 h-4 mr-2" />
                分享预览
              </Button>

              <Button className="bg-primary hover:bg-primary-600">
                <Download className="w-4 h-4 mr-2" />
                应用主题
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* 左侧：主题信息 */}
          <div className="lg:col-span-1">
            <Card>
              <CardHeader>
                <CardTitle>主题信息</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <h3 className="font-semibold text-material-grey-900">{currentTheme.name}</h3>
                  <p className="text-sm text-material-grey-600">当前预览主题</p>
                </div>

                <div>
                  <h4 className="text-sm font-medium mb-2">配色方案</h4>
                  <div className="space-y-2">
                    {Object.entries(currentTheme.colors).map(([key, value]) => (
                      <div key={key} className="flex items-center space-x-2">
                        <div 
                          className="w-4 h-4 rounded border border-material-grey-300"
                          style={{ backgroundColor: value }}
                        ></div>
                        <span className="text-sm capitalize">{key}</span>
                        <span className="text-xs text-material-grey-500 ml-auto">{value}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div>
                  <h4 className="text-sm font-medium mb-2">预览设备</h4>
                  <div className="flex items-center space-x-2">
                    {getDeviceIcon()}
                    <span className="text-sm">
                      {previewDevice === 'desktop' && '桌面 (1200px+)'}
                      {previewDevice === 'tablet' && '平板 (768px)'}
                      {previewDevice === 'mobile' && '手机 (375px)'}
                    </span>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* 快速切换 */}
            <Card className="mt-6">
              <CardHeader>
                <CardTitle>快速切换</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {themes.map(theme => (
                    <button
                      key={theme.id}
                      onClick={() => setSelectedTheme(theme.id)}
                      className={`w-full flex items-center space-x-3 p-3 rounded-lg border transition-colors ${
                        selectedTheme === theme.id 
                          ? 'border-primary bg-primary/5' 
                          : 'border-material-grey-200 hover:bg-material-grey-50'
                      }`}
                    >
                      <div className="flex space-x-1">
                        {Object.values(theme.colors).slice(0, 3).map((color, index) => (
                          <div 
                            key={index}
                            className="w-3 h-3 rounded-full border border-material-grey-300"
                            style={{ backgroundColor: color }}
                          ></div>
                        ))}
                      </div>
                      <span className="text-sm font-medium">{theme.name}</span>
                    </button>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* 右侧：预览区域 */}
          <div className="lg:col-span-3">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Eye className="w-5 h-5" />
                  <span>界面预览</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className={`${getDeviceClass()} border border-material-grey-300 rounded-lg overflow-hidden`}>
                  {/* 模拟界面预览 */}
                  <div 
                    className="min-h-[600px]"
                    style={{ backgroundColor: currentTheme.colors.background }}
                  >
                    {/* 模拟头部 */}
                    <div 
                      className="h-16 flex items-center justify-between px-6 border-b"
                      style={{ 
                        backgroundColor: currentTheme.colors.primary,
                        borderColor: currentTheme.colors.secondary + '20'
                      }}
                    >
                      <div className="flex items-center space-x-3">
                        <div className="w-8 h-8 bg-white/20 rounded-lg"></div>
                        <span className="text-white font-semibold">筋斗云</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <div className="w-8 h-8 bg-white/20 rounded-full"></div>
                      </div>
                    </div>

                    {/* 模拟内容区域 */}
                    <div className="p-6">
                      <Tabs defaultValue="dashboard" className="w-full">
                        <TabsList className="grid w-full grid-cols-3">
                          <TabsTrigger value="dashboard">仪表板</TabsTrigger>
                          <TabsTrigger value="files">文件</TabsTrigger>
                          <TabsTrigger value="settings">设置</TabsTrigger>
                        </TabsList>

                        <TabsContent value="dashboard" className="mt-6">
                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            {[1, 2, 3, 4, 5, 6].map(i => (
                              <div 
                                key={i}
                                className="p-4 rounded-lg border"
                                style={{ 
                                  backgroundColor: currentTheme.colors.surface,
                                  borderColor: currentTheme.colors.secondary + '30'
                                }}
                              >
                                <div className="flex items-center justify-between mb-2">
                                  <div 
                                    className="w-8 h-8 rounded"
                                    style={{ backgroundColor: currentTheme.colors.primary + '20' }}
                                  ></div>
                                  <Badge 
                                    className="text-xs"
                                    style={{ 
                                      backgroundColor: currentTheme.colors.primary + '20',
                                      color: currentTheme.colors.primary
                                    }}
                                  >
                                    活跃
                                  </Badge>
                                </div>
                                <h3 className="font-medium mb-1">数据项 {i}</h3>
                                <p className="text-sm text-material-grey-600">示例描述内容</p>
                                <div className="mt-3">
                                  <Button 
                                    size="sm" 
                                    className="w-full"
                                    style={{ backgroundColor: currentTheme.colors.primary }}
                                  >
                                    查看详情
                                  </Button>
                                </div>
                              </div>
                            ))}
                          </div>
                        </TabsContent>

                        <TabsContent value="files" className="mt-6">
                          <div className="space-y-3">
                            {[1, 2, 3, 4, 5].map(i => (
                              <div 
                                key={i}
                                className="flex items-center space-x-4 p-3 rounded-lg border"
                                style={{ 
                                  backgroundColor: currentTheme.colors.surface,
                                  borderColor: currentTheme.colors.secondary + '30'
                                }}
                              >
                                <div 
                                  className="w-10 h-10 rounded"
                                  style={{ backgroundColor: currentTheme.colors.primary + '20' }}
                                ></div>
                                <div className="flex-1">
                                  <h4 className="font-medium">文件 {i}.pdf</h4>
                                  <p className="text-sm text-material-grey-600">2.4 MB • 2024-01-20</p>
                                </div>
                                <Button 
                                  variant="outline" 
                                  size="sm"
                                  style={{ borderColor: currentTheme.colors.primary }}
                                >
                                  下载
                                </Button>
                              </div>
                            ))}
                          </div>
                        </TabsContent>

                        <TabsContent value="settings" className="mt-6">
                          <div className="space-y-4">
                            {['通知设置', '隐私设置', '账户设置', '主题设置'].map((setting, i) => (
                              <div 
                                key={i}
                                className="flex items-center justify-between p-4 rounded-lg border"
                                style={{ 
                                  backgroundColor: currentTheme.colors.surface,
                                  borderColor: currentTheme.colors.secondary + '30'
                                }}
                              >
                                <div>
                                  <h4 className="font-medium">{setting}</h4>
                                  <p className="text-sm text-material-grey-600">配置{setting}选项</p>
                                </div>
                                <Button 
                                  variant="outline" 
                                  size="sm"
                                  style={{ borderColor: currentTheme.colors.primary }}
                                >
                                  配置
                                </Button>
                              </div>
                            ))}
                          </div>
                        </TabsContent>
                      </Tabs>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </>
  );
};

export default ThemePreview;
